<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo">
                <el-input v-model="search.orderNo" placeholder="服务订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone" placeholder="用户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="verificationNum">
                <el-input v-model="search.verificationNum" placeholder="提货码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button @click="reset('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-row>
        <el-col :span="24">
          <el-card shadow="always">
            <el-row>
              <el-col :span="6">
                <p>
                  <el-date-picker
                    :clearable="false"
                    type="date"
                    :editable="false"
                    format="yyyy-MM-dd"
                    placeholder="更改日期"
                    @change="timeChange"
                    v-model="search.time" style="margin-top: -10px"
                  ></el-date-picker>
                </p>
              </el-col>
              <el-col :span="6">
                <p>用户自提单：<span>{{totalItem}}</span>单</p>
              </el-col>
              <el-col :span="12">
                <el-button type="primary pull-right" size="small" @click="showPrintModal('')" v-if="activeName == '2'">批量打印</el-button>
              </el-col>
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待提货" :disabled="activeName == '2'" name="2">
                <el-table
                  :data="tableData2"
                  stripe
                  @selection-change="changeFun"
                  style="width: 100%"
                >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="orderNo"
                    label="服务订单号">
                  </el-table-column>
                  <el-table-column
                    prop="consigneName"
                    label="用户名称">
                  </el-table-column>
                  <el-table-column
                    prop="consignePhone"
                    label="用户电话">
                  </el-table-column>
                  <el-table-column
                    prop="totalPackage"
                    label="总包件">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="start"
                    label="预约时间">
                    <template slot-scope="scope">
                      {{ unixTimestampFilter(scope.row.start, 'YYYY-MM-DD') + ' ' + scope.row.timeInterval }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    prop="storageCost"
                    label="仓储服务费">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.storageCost"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="verificationNum"
                    label="提货码">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <a href="javascript:;" class="blue-color" @click="showPrintModal(scope.row)">打印</a>
                      <a href="javascript:;" class="blue-color" @click="confirmPick(scope.row)">确认提货</a>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="已提货" :disabled="activeName == '1'" name="1">
                <el-table
                  :data="tableData1"
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="orderNo"
                    label="服务订单号">
                  </el-table-column>
                  <el-table-column
                    prop="consigneName"
                    label="用户名称">
                  </el-table-column>
                  <el-table-column
                    prop="consignePhone"
                    label="用户电话">
                  </el-table-column>
                  <el-table-column
                    prop="totalPackage"
                    label="总包件">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="start"
                    label="预约时间">
                    <template slot-scope="scope">
                      {{ unixTimestampFilter(scope.row.start, 'YYYY-MM-DD') + ' ' + scope.row.timeInterval }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="storageCost"
                    label="仓储服务费">
                  </el-table-column>
                  <el-table-column
                    prop="verificationNum"
                    label="提货码">
                  </el-table-column>
                  <el-table-column
                    prop="pickUpName"
                    label="操作人">
                  </el-table-column>
                  <el-table-column
                    prop="pickUpTime"
                    label="提货时间">
                    <template slot-scope="scope">
                      {{ unixTimestampFilter(scope.row.pickUpTime, 'HH:mm')}}
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
            <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
            <div class="clearfix"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
    <Print-modal ref="PrintModal" :idArr="idArr" @refresh="getTableData"></Print-modal>
  </el-row>
</template>
<script>
import {copy, confirm, merge} from '@/utils'
import {unixTimestampFilter} from '@/filters'
import moment from 'moment'
import PrintModal from '@/views/oms/orders/userPick/PrintModal'
import Pagination from '@/components/Pagination'
export default {
  name: 'userPickIndex',
  components: {
    PrintModal,
    Pagination
  },
  data() {
    return {
      search: {
        time: moment().format('YYYY-MM-DD'), // 默认当前时间
        serviceOrderNo: '',
        consigneName: '',
        consignePhone: '',
        verificationNum: ''
      },
      totalItem: 0,
      params: {
        pageSize: 20,
        pageNum: 1
      },
      searchOpen: false,
      searchLoading: false,
      activeName: '2',
      tableData2: [],
      tableData1: [],
      idArr: [],
      multipleSelection: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    unixTimestampFilter,
    init() {
      this.getHeadData()
      this.getTableData()
    },
    pagination(page) {
      this.params.pageNum = page
      this.init()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.init()
    },
    timeChange(val) {
      this.search.time = moment(val).format('YYYY-MM-DD')
      this.init()
    },
    searchFunc(search) {
      this.init()
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    changeFun(val) {
      this.multipleSelection = []
      this.multipleSelection = val
    },
    showPrintModal(data) {
      this.idArr = []
      if (data.id) {
        this.idArr.push(data.id)
      } else {
        this.multipleSelection.forEach(item => {
          this.idArr.push(item.id)
        })
      }
      if (!this.idArr.length) {
        this.$message({
          type: 'warning',
          message: '请选择要打印的订单！'
        })
        return
      }
      if (!data.id) {
        confirm(`是否将选择的<span class="font-red">${this.idArr.length}</span>单进行打印`, `批量打印`, {
          type: 'warning',
          center: true,
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: false,
          closeOnClickModal: false
        }).then(_ => {
          this.$refs.PrintModal.show()
        })
      } else {
        this.$refs.PrintModal.show()
      }
    },
    getHeadData() {
      this.$ajax.get('/ms-warehouse-order/user-pick-up/get-head', {time: this.search.time}).then(response => {
        this.totalItem = response.data || 0
      })
    },
    confirmPick(data) {
      confirm('确定该用户已经结算完毕，可以提货？', '温馨提示', {
        type: 'warning',
        confirmButtonLoading: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          this.$ajax.post('/ms-terminal-order/user-pick-up/pick-up', {id: data.id, storageCost: data.storageCost}).then(response => {
            if (response.success) {
              close()
              this.$message({
                type: 'success',
                message: '提货确认成功！'
              })
              this.init()
            } else {
              confirmButtonLoadingClose()
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
      console.log('确认提货', data)
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      data.isPickUp = this.activeName
      this.searchLoading = true
      this.$ajax.table('/ms-terminal-order/user-pick-up/get-distribution-list', data).then(response => {
        let tableData = copy(response.data || [])
        this.totalItem = response.totalItem
        tableData.forEach(item => {
          item.copyStorageCost = item.storageCost
        })
        if (this.activeName === '2') {
          this.tableData2 = tableData
        } else {
          this.tableData1 = tableData
        }
      }).finally(_ => {
        this.searchLoading = false
      })
    },
    handleClick(tab, event) {
      this.init()
    }
  }
}
</script>
